<template>
  <div class="innerBox">
    <span>{{ props.title }}</span>
    <a-form layout="inline" :model="state.formObj" size="small">
      <a-form-item
        v-for="item in formInputs"
        :label="item.label"
        :name="item.name"
        :key="`search${item.name}`"
      >
        <a-select
          v-if="item.type === 'select'"
          size="small"
          :style="item.style"
          :dropdownMatchSelectWidth="false"
          :multiple="item.multiple"
          v-model:value="state.formObj[item.name]"
          :placeholder="item.placeholder || `请选择${item.label}`"
          :disabled="item.disabled"
          @change="item.onChange"
        >
          <template v-for="(option, k) in item.options">
            <a-select-opt-group
              v-if="!!option.children"
              :key="`${option.label}${k}`"
            >
              <template #label>
                {{ option.label }}
              </template>
              <a-select-option
                v-for="(item, j) in option.children"
                :value="item.value"
                :key="`${item.value}_${j}`"
                :title="item.label"
                >{{ item.label }}</a-select-option
              >
            </a-select-opt-group>
            <a-select-option
              v-else
              :value="option.value"
              :key="`${option.value}_${k}`"
              :title="option.label"
              >{{ option.label }}</a-select-option
            >
          </template>
        </a-select>
        <a-range-picker
          size="small"
          v-else-if="item.type === 'dateRange'"
          v-model:value="state.formObj[item.name]"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="submit" size="small">查询</a-button>
      </a-form-item>
      <!--插槽-->
      <slot></slot>
    </a-form>
  </div>
</template>
<script setup>
import { reactive, toRaw, watch } from "vue";
import _ from "lodash";

const props = defineProps(["title", "formInputs", "obj"]);
const emits = defineEmits(["submit"]);

const state = reactive({ formObj: {} });

watch(
  () => props.obj,
  (v) => {
    if (v) {
      const o = { ...v };
      state.formObj = o;
    } else {
      state.formObj = null;
    }
  },
  { immediate: true }
);

const submit = () => {
  emits("submit", { ...state.formObj });
};
</script>
<style lang="less" scoped>
.innerBox {
  width: 100%;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.1em;
}
</style>
